<template>
	<view></view>
	<view class="yy">
		<view class="yy01">
			<view class="daoheng">
			<view class="daoheng01">
				<text class="daoheng_01">
				<text class="daoheng_01_01">月查询结果</text>
			</text>
			<picker 
					mode="date" 
					:value="date" 
					:start="startDate" 
					:end="endDate" 
					fields="year"
					@change="nian">
					<text class="transparent-tag">{{nianfen}}年</text>
				</picker>
				<text style="text-indent: 100rpx;">{{username}}</text>
			</view>
		<view class="container">
			
		
				<view class="zhuti01">
				  <yue class="yue" @monthSelected="onMonthSelected"></yue>
			  </view>
	</view>
		</view>
		</view>
		
		 <view class="daoheng02">
			  	<text @click="showContent('ability')" :class="{ active: currentContent === 'ability' }">能力得分</text>
			  	<text  @click="showContent('qualityVue')" :class="{ active: currentContent === 'qualityVue' }">素质得分</text>
			  	<text  @click="showContent('nineGridVue')" :class="{ active: currentContent === 'nineGridVue' }">人才评定模型</text>
			  </view>
		
		<view v-if="currentContent == 'ability'">
				<view class="zhuti">
		
					<view class="umessage" v-if="categories==''">
						本月暂无数据
					</view>
					<view class="zhuti2" v-else>
						<view class="zhuti02">
		
							<view class="index">
								<view class="chart-container">
									<qiun-data-charts type="radar" :opts="opts" :chartData="chartData"></qiun-data-charts>
								</view>
							</view>
		
						</view>
						<view class="zhuti03">
							<view class="zhuti03_1">
								<view class="zhti03_1_1">
									<text class="zhuti03_01">能力得分</text>
									<text>{{zong.toFixed(2)}}分</text>
								</view>
								<view class="zhuti03_1_2">
									<view v-for="(category, index) in categories" :key="index" class="list-item">
										<view class="item-title">
											<view class="title-text">{{ category.category_Name }}</view>
											<view class="fenshu">{{category.score}}分</view>
										</view>
										<view class="sub-list">
											{{ category.content_Name }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentContent == 'qualityVue'">
				<view class="zhuti">
		
					<view class="umessage" v-if="categories==''">
						本月暂无数据
					</view>
					<view class="zhuti2" v-else>
						<view class="zhuti02">
		
							<view class="index">
								<view class="chart-container">
									<qiun-data-charts type="radar" :opts="opts" :chartData="chartData"></qiun-data-charts>
								</view>
							</view>
		
						</view>
						<view class="zhuti03">
							<view class="zhuti03_1">
								<view class="zhti03_1_1">
									<text class="zhuti03_01">素质得分</text>
									<text>{{zong.toFixed(2)}}分</text>
								</view>
								<view class="zhuti03_1_2">
									<view v-for="(category, index) in categories" :key="index" class="list-item">
										<view class="item-title">
											<view class="title-text">{{ category.category_Name }}</view>
											<view class="fenshu">{{category.score}}分</view>
										</view>
										<view class="sub-list">
											{{ category.content_Name }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 九宫格 -->
			<view v-if="currentContent == 'nineGridVue'">
		
				<view class="umessage" style="text-align: center;" v-if="feiwu==true">
					本月暂无数据
				</view>
		
		
				<view class="fw" v-else>
					<view class="cc_1_2">
						<view class="m3">
							<view class="m3_1">
								<text>能力得分</text>
								<text>{{nengzong.toFixed(2)}}分</text>
							</view>
							<view class="m3_2">
								<text>素质得分</text>
								<text>{{suzong.toFixed(2)}}分</text>
							</view>
						</view>
					</view>
		
					<view class="m4">
						<view class="m4_1">
							<view id="talent-grid">
								<!-- 横坐标 -->
								<view class="axis x-axis">
									<text class="x1">0</text>
									<text class="x2">33</text>
									<text class="x3">67</text>
									<text class="x4">100</text>
									<text class="xt">[潜力与价值观维度100分]</text>
								</view>
								<!-- 纵坐标 -->
								<view class="axis y-axis">
									<text class="y1">100</text>
									<text class="y2">67</text>
									<text class="y3">33</text>
									<text class="y4">0</text>
									<text class="yt">[绩效维度100分]</text>
								</view>
								<!-- 九宫格 -->
								<view class="grid-container">
									<view class="grid-row">
										<view class="grid-cell">
											<image src="/static/number/numb6.jpg"></image>
										</view>
										<view class="grid-cell">
											<image src="/static/number/numb8.jpg"></image>
										</view>
										<view class="grid-cell">
											<image src="/static/number/numb9.jpg"></image>
										</view>
									</view>
									<view class="grid-row">
										<view class="grid-cell">
											<image src="/static/number/numb3.jpg"></image>
										</view>
										<view class="grid-cell">
											<image src="/static/number/numb5.jpg"></image>
										</view>
										<view class="grid-cell">
											<image src="/static/number/numb7.jpg"></image>
										</view>
									</view>
									<view class="grid-row">
										<view class="grid-cell">
											<image src="/static/number/numb1.jpg"></image>
										</view>
										<view class="grid-cell">
											<image src="/static/number/numb2.jpg"></image>
										</view>
										<view class="grid-cell">
											<image src="/static/number/numb4.jpg"></image>
										</view>
									</view>
								</view>
								<!-- 张三的位置 -->
								<view class="person" :style="{ top: `${msjY}rpx`, left: `${msjX}rpx` }" id="zhangsan">
									<view class="dot"></view>
									<view class="name">{{username}}</view>
								</view>
		
							</view>
		
						</view>
					</view>
		
					<view class="m5">
						<view class="m5_1">
							<text style="color: #333333;">九宫格人才定位说明</text>
							<view class="text-with-dot">1号位置：问题员工绩效低且发展潜力弱建议调岗或淘汰</view>
							<view class="text-with-dot">2号位置：差距员工绩效较低且发展潜力较弱建议进行绩效辅导或调整岗位，分析原因，继续观察</view>
							<view class="text-with-dot">3号位置：基本胜任绩效中等，发展潜力较低建议留任观察，给与辅导与培训</view>
							<view class="text-with-dot">4号位置：待发展者，绩效较低但发展潜力较大，建议针对性分析原因，加强辅导，进行资源支持，给予机会</view>
							<view class="text-with-dot">5号位置：中坚力量，建议给予挑战性任务，并给予关注与辅导</view>
							<view class="text-with-dot">6号位置：熟练员工，建议立足现岗位发展，扩大职责，给予支持</view>
							<view class="text-with-dot">7号位置：潜力之星，建议设置业绩挑战目标，并给予辅导</view>
							<view class="text-with-dot">8号位置：绩效之星，建议给予历练机会，提供更大成长空间</view>
							<view class="text-with-dot">9号位置：超级明星，建议承担更大责任，激励倾斜，重点关注</view>
						</view>
		
					</view>
		
				</view>
			</view>
		</view>
</template>

<script setup>
	//js文件
	import {listUsergrades,listUsergrades02,listUsergrades03,listUsergrades04,listUsergrades05} from '../../api/yue.js'
	import { ref,onMounted,computed,reactive } from 'vue';
	 import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	 import yueVue from '../../components/yue/yue.vue';
	 import qualityVue from '../../components/quality/quality.vue';
	 import nineGridVue from '../../components/nine-grid/nine-grid.vue';
	 //取token对象
	 import {
	 	UserDetails
	 } from "@/store/UserDetails.js"
import { number } from 'echarts';
	 
	 
	 const ll=UserDetails()
	 const username=ref('');
	 //定义基层一个对象往后端发送
	 const form = ref({
	   userId: 0,
	   parentId: 0,
	   time: "",
	   quarter: 0,
	 });
	 //定义中层一个对象往后端发送
	 const form01 = ref({
	   userId: 0,
	   month: "",
	   year: '',
	 });
	 //定义九宫格基层一个对象往后端发送
	 const jiuform = ref({
	   userId: 0,
	   time: "",
	   quarter: 0,
	 });
	 //定义九宫格中层一个对象往后端发送
	 const jiuform01 = ref({
	   userId: 0,
	   month: "",
	   year: '',
	 });
	
	//定义一个没有用的数据来判断九宫咯是否有数据
	const feiwu=ref(false);
	 //获取年份
	 const nian=(e)=>{
		nianfen.value=e.detail.value
		chaxunjs();
	 }
	 //查询基层总分
	 const chaxunzongf=async()=>{
		 let pp= await listUsergrades04(jiuform.value)
		 if(pp[0]==0 && pp[1]==0){//判断这个月的九宫格是否有数据
		 
		 	  feiwu.value=true;
		 }else{
			 feiwu.value=false;
		 }
		  nengzong.value=pp[0];
		  suzong.value=pp[1];
		  jiugongge();
	 }
	 //查询中层总分
	 const chaxunzongfen=async()=>{

	 		 let pp= await listUsergrades05(jiuform01.value)
			 if(pp[0]==0 && pp[1]==0){//判断这个月的九宫格是否有数据
				 feiwu.value=true;
			 }else{
			 feiwu.value=false;
			}
	 		  nengzong.value=pp[0];
	 		  suzong.value=pp[1];
			  jiugongge();
	 }
	 
	 
	 const onMonthSelected = (month) => {
		 console.log(month)
if(month == '1'){
	month='01';
	    jidu = "1";
}else if(month == '2'){
	month='02';
	    jidu = "1";
}else if(month == '3'){
	month='03';
	    jidu = "1";
}else if(month == '4'){
	month='04';
	    jidu = "2";
}else if(month == '5'){
	month='05';
	    jidu = "2";
}else if(month == '6'){
	month='06';
	    jidu = "2";
}else if(month == '7'){
	month='07';
	    jidu = "3";
}else if(month == '8'){
	month='08';
	    jidu = "3";
}else if(month == '9'){
	month='09';
	    jidu = "3";
}else if(month == '10' ||
		month == '11' ||
		month == '12'){
	    jidu = "4";
	  }
	//点击月份存到currentMonth中
	currentMonth.value=month;
	 	showContent('ability')
	   
	 };
	 
	 //定义一个月
	 const currentMonth = ref('');
	 currentMonth.value = new Date().getMonth() + 1 ;
	 //定义一个季度
	 var jidu=Math.floor(parseInt(currentMonth.value) / 3)
	 //定义一个年
	 const nianfen=ref("")
	 nianfen.value=new Date().getFullYear();
	 //定义一个角色id的值
	 var id=ref(0)
	 //页面一打开的方式		--查询角色
	 const chaxunjs =async()=>{
		 let pp= await listUsergrades02(userId1.value)
		 //九宫格姓名
		 username.value=pp.nick_name
		 //获取角色id
		 id.value=pp.role_id
		 chaxundangqian();
		
		//查询出来然后再走这个获取当月的季度像后端传值	
		 chaxun();
		
	 }
	 
	 //定义一个数组
	 const arr=ref([])
	 const ars=ref([])
	 //总数
	 const zong=ref(0);
	 //能力总分
	 const nengzong=ref(0);
	 //素质总分
	 const suzong=ref(0);
	 //根据角色id查询用户的数据
	 const chaxun =async()=>{
		 zong.value=0;
		 arr.value=[];
		 ars.value=[];
		
	 		 //代表基层员工
	 		 if(id.value==100){
				 console.log("基层员工的查询条件")
				 console.log(form.value)
	 			 let pp= await listUsergrades(form.value)
				 
	 			 categories.value=pp
	 			 for (var i = 0; i < categories.value.length; i++) {
					 
	 				   zong.value+=categories.value[i].score
					   arr.value.push(categories.value[i].category_Name+"-"+categories.value[i].score)
					   ars.value.push(categories.value[i].score)
	 			 }
				
				getData()
	 			
	 		 }else if(id.value==101){
	 				 //代表中层管理人员
					 console.log("中层领导的查询条件")
					 console.log(form01.value)
	 				 let pp= await listUsergrades03(form01.value)
	 			  categories.value=pp
				  
	 			  for (var i = 0; i < categories.value.length; i++) {
	 							   zong.value+=categories.value[i].score
								   arr.value.push(categories.value[i].category_Name+"-"+categories.value[i].score)
								   ars.value.push(categories.value[i].score)
	 			  }
				
				  getData()
	 		 } 
	  }
	 const currentContent = ref('ability')  // 默认显示能力评分
	// 数据源
	const categories = ref([]);
	const chartData=ref({})
		const opts=ref({
				fontSize:13,
				extra: {
				          radar: {
							  radius:75,
							  
				            max: 20,
				          }
				        }
		      })
		function getData(){
			setTimeout(()=>{
				const res={
					categories: arr.value,
					            series: [
					              {
									name:'评分详情',
					                data: ars.value,
									
					              }
					            ],
							
				}
				
				chartData.value =  reactive(JSON.parse(JSON.stringify(res)));
			},750)
		}
	//九宫格
		 //定义九宫格所需的值1
		 const msjX=ref(0);
		 const msjY=ref(0);
		 // script.js
		 const msj = ref(null);
		 // 九宫格方法
		 //定义方法处理九宫格
		 const jiugongge = () => {

		   // findname();
		   const gridWidth = 500;
		   const gridHeight = 500;
		 
		   // 假设 msjPotential 和 msjPerformance 是从某处获取的动态数据
		   const msjPotential = nengzong.value; // 潜力得分
		   const msjPerformance = suzong.value; // 绩效得分
		   // 计算孟淑君在九宫格中的位置
		   msjX.value = (msjPotential / 100) * gridWidth;
		   msjY.value = gridHeight - (msjPerformance / 100) * gridHeight;

		 };
	
	//查询一打开方式的方法
	const chaxundangqian=()=>{
		if(id.value==100){
			 //基层年份和月份
		 form.value.time=nianfen.value + "-" + currentMonth.value;
		 //季度
		 form.value.quarter= jidu
		 form.value.userId=userId1.value
		 }else if(id.value==101){
			 //中层的年份和月份
		 form01.value.year=nianfen.value; 
		 form01.value.userId=userId1.value;
		 form01.value.month=currentMonth.value;
		 }
		 if(currentContent.value == 'ability'){//能力测评
		 
		 			 form.value.parentId=1
		 			 form01.value.parentId=1
		 }else if(currentContent.value == 'qualityVue'){//素质测评
		 
		 			 form.value.parentId=7
		 			 form01.value.parentId=7
		}else if(currentContent.value == 'nineGridVue'){//九宫格
		
				 if(id.value==100){//基层点击九宫格
					 jiuform.value.time=nianfen.value + "-" + currentMonth.value;
					 jiuform.value.quarter= jidu;
					 jiuform.value.userId=userId1.value
					 chaxunzongf();
				 }else if(id.value==101){//中层点击九宫格
					 jiuform01.value.year=nianfen.value;
					 jiuform01.value.month=currentMonth.value;
					 jiuform01.value.userId=userId1.value
					  chaxunzongfen();
				 }
			return;
		}
	}
	
	

	const showContent = (content) => {
		if(content==null){
			currentContent.value = 'ability'
			chaxundangqian()
			chaxun()
		}else{
			currentContent.value=content
			chaxundangqian()
			chaxun()
		}
	  
	}
	
	
	const userId1=ref(0);
	onLoad((option) => {
		
			if(option.userId!=undefined){
				option.userId=Number(option.userId)
				userId1.value=option.userId
			}else{
				userId1.value=ll.UserText.data.userId
			}
				//查询角色
				chaxunjs()
				});

</script>










<style lang="scss">
	.container {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		/* 项目之间的间距 */
		font-size: 18rpx;

	}

	.umessage {
		font-size: 14px;
		color: #666;
	}

	.title-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 700;
	}
	.fenshu{
		color: #333;
		font-weight: 500;
		font-size: 28rpx;
	}

	.sub-list {
		font-size: 16rpx;
		border-bottom: 1px solid #E7E7E7;
		padding-bottom: 15px;
	}

	.item-view {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease, color 0.3s ease;
		/* 添加过渡效果 */
	}

	.item {
		width: 10%;
		/* 确保项目文本和对钩图标在同一行内对齐 */
		text-align: left;
		/* 项目文本左对齐 */
	}

	.check-mark {
		position: absolute;
		right: 0px;
		/* 对钩图标距离项目右边的距离 */
		bottom: 0px;
		/* 对钩图标距离项目底部的距离 */
		width: 20px;
		/* 对钩图标的宽度 */
		height: 20px;
		/* 对钩图标的高度 */
	}

	.active {
		color: #333;
		font-weight: 500;
	}

	// //文本黑点
	// .text-with-dot::after {
	// 	content: '\2022';
	// 	/* Unicode for a bullet point */
	// 	color: #979797;
	// 	display: inline-block;
	// 	margin-right: 5px;
	// 	/* Space between the dot and the text */
	// }

	.m1 {
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: white;
		height: 90rpx;

		.m1_1 {
			display: flex;
			width: 80%;

			align-items: center;
			margin-left: 20rpx;

			.m1_1_1 {
				margin-left: 20rpx;

				.nian {
					width: 70rpx;
					background-color: #c9dbfd;
					color: #0865f7;
					border-radius: 10rpx;

					.tt {
						margin-left: 18rpx;
						font-size: 28rpx;
					}
				}
			}

			.m1_1_2 {
				font-size: 42rpx;
				font-weight: bold;
			}
		}

	}

	.m2 {
		height: 100%;

		.cc {
			display: flex;
			flex-direction: column;

			.cc_1 {

				height: 80rpx;
				margin-top: 20rpx;

				.cc_1_1 {
					display: flex;

					justify-content: space-around;

				}
			}

			.cc_1_2 {
				margin-top: 20rpx;
			}

		}
	}

	.m3 {
		box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
		margin: 0 10px;
		height: 160rpx;
		
		border-radius: 10rpx;
		background-color: white;
		color: #666666;

		.m3_1 {
			width: 90%;
			// border: 1px solid fuchsia;
			height: 50%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 40rpx;

		}

		.m3_2 {
			// border: 1px solid aqua;
			width: 90%;
			height: 50%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// border-top: 1px solid gainsboro;
			margin-left: 40rpx;
		}
	}

	.m4 {
		margin-left: 25rpx;

		height: 680rpx;
		width: 94%;
		background-color: white;
		
		box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);

		.m4_1 {
			margin-top: 25rpx;
			margin-left: 35rpx;
			border: 1px solid white;
		}
	}

	.m5_1 {
		padding: 20px;
		color: #979797;
		line-height: 28px;
		font-size: 24rpx;
	}

	/* styles.css */
	#talent-grid {

		position: relative;
		width: 500rpx;
		height: 500rpx;
		margin: 50px auto;
		border: 1px solid #000;
		margin-top: 60rpx;
		// border: 1px solid red;
	}

	.axis {
		position: absolute;
		font-size: 12px;
		color: #333;
	}

	.x1 {
		position: absolute;
		bottom: -5px;
		left: 0;

	}

	.x2 {
		position: absolute;
		bottom: -5px;
		left: 80px;
	}

	.x3 {
		position: absolute;
		bottom: -5px;
		left: 168px;
	}

	.x4 {
		position: absolute;
		bottom: -5px;
		left: 250px;
	}

	.xt {
		position: absolute;
		bottom: -40px;
		left: 150px;
		font-size: 12px;
		color: red;
	}

	.x-axis {
		bottom: -15px;
		left: 0;
		width: 100%;
		text-align: center;
	}

	.y-axis {
		top: 0;
		left: -20px;
		height: 100%;
		writing-mode: vertical-rl;
		text-align: center;
	}

	.y1 {
		position: absolute;
		top: 0;
		left: -5px;
	}

	.y2 {
		position: absolute;
		top: 80px;
		left: -5px;
	}

	.y3 {
		position: absolute;
		top: 165px;
		left: -5px;
	}

	.y4 {
		position: absolute;
		top: 250px;
		left: -5px;
	}

	.yt {
		position: absolute;
		top: 150px;
		left: -25px;
		font-size: 12px;
		color: red;
	}

	image {
		width: 120rpx;
		height: 120rpx;
	}

	.grid-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	}

	.grid-row {
		display: flex;
		height: 33.33%;

	}

	.grid-cell {
		width: 33.33%;
		border: 1px dashed #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.person {
		position: relative;
		top: 0rpx;
		left: 0rpx;
		position: absolute;
		text-align: center;
	}

	.dot {

		width: 15px;
		height: 15px;
		border-radius: 50%;
		margin-bottom: 5px;
	}

	.name {
		font-size: 12px;
		color: #333;
	}

	#zhangsan .dot {
		background-color: red;
	}

	#lisi .dot {
		background-color: blue;
	}

	#msj .dot {
		background-color: green;
	}

	.transparent-tag {
		display: block;
		width: 160rpx;
		height: 48rpx;
		line-height: 48rpx;
		color: #0C5FFA;
		border-radius: 10rpx;
		text-align: center;

		background-color: rgba($color: #0C5FFA, $alpha: 0.22);
		font-size: 28rpx;
		font-weight: 500;

		background-image: url('../../static/number/jt.png');
		background-repeat: no-repeat;
		background-position: right center;


	}


	.daoheng01 {
		display: flex;
		flex-direction: row;
	}

	.daoheng_01_1 {
		width: 100rpx;
	}

	.yy {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.yy01 {
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;

	}

	.daoheng {
		width: 90%;

		/* border: 2px solid red; */
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.daoheng02 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: #666;
		margin-bottom: 30rpx;
		background-color: #ffffff;
		padding-left: 50rpx;
		padding-right: 50rpx;

	}

	.daoheng02 text {
		margin-right: 20px;
		cursor: pointer;
		position: relative;
		padding-bottom: 5px;
	}

	.daoheng02 text::after {
		content: '';
		position: absolute;
		bottom: -5rpx;
		left: 0;
		right: 0;
		margin: auto;
		width: 50%;
		height: 2px;
		background-color: blue;
		transform: scaleX(0);
		transition: transform 0.3s ease-in-out;

	}

	.daoheng02 text.active::after {
		transform: scaleX(1);

	}

	.daoheng_01 {
		display: flex;
		flex-direction: row;
	}

	.daoheng_01_01 {
		font-weight: bold;
		color: #333333;
		margin-right: 30px;
	}

	.zhuti {
		
		background-color: rgba(247, 247, 247, 0.4);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.container {
		overflow-x: auto;
		/* 水平滚动条 */
		white-space: nowrap;
		width: 100%;
		/* 容器宽度占满父元素 */
		height: 58pt;
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.zhuti01 {
		padding-top: 30rpx;
		display: flex;
		flex-wrap: nowrap;
		gap: 10rpx
	}

	.yue {
		flex-shrink: 0;
		/* 防止元素缩小 */
	}

	.zhuti_01 {
		border: 2px solid black;
		font-weight: bold;
		/* 字体变粗 */
		padding: 5rpx 20rpx;
		/* 增加左右内边距 */
		border-radius: 8px;
		/* 设置圆角 */
		background-color: rgba(247, 247, 247, 0.5);
		/* 设置背景颜色和透明度 */
		color: black;
		/* 文字颜色 */
		margin-right: 30px;
		/* 在每个元素之间留有空白 */
		text-align: center;
		/* 文字水平居中对齐 */
		display: inline-block;
		/* 确保每个元素作为一个块级元素处理 */
	}

	.zhuti02 {
		background-color: #FFFFFF;
		box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		padding: 15px 0;
		height: 183pt;
		margin: 15px 20px;
	}

	.zhuti03 {
		background-color: #FFFFFF;
		box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		margin: 15px 20px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 15px 0;
	}

	.zhuti03_1 {
		width: 90%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.zhti03_1_1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 40px;
	}

	.zhuti03_1_2 {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		background-color: #F7F7F7;
		width: 100%;

		border-radius: 10px;
		/* 设置圆角 */
		box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
	}

	.zhuti03_01 {
		color: #666666;
	}

	.list-item {
		margin: 5px 0;

	}

	.item-title {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		margin-bottom: 5rpx;
		position: relative;
		/* 添加相对定位 */
		padding-left: 40rpx;
		/* 为黑点留出空间 */
	}

	.item-title::before {
		content: '•';
		/* 显示黑点 */
		position: absolute;
		left: 0;
		top: 0;
		color: #000;
		/* 黑点颜色 */
	}

	.sub-list {
		padding-left: 20px;
		font-size: 0.9em;
		/* 调整子列表项的字体大小 */
		font-weight: 300;
		/* 调整子列表项的字体粗细 */
		margin: 5px 0;
	}
</style>
